<template>
	<view class="r-canvas-component" :class="{'hidden':hidden}">
		
		<!-- <u-mask :show="show" @click="close" > -->
				<canvas v-if="canvas_id" :canvas-id="canvas_id" :id="canvas_id" :style="{width:(canvas_width*0.8)+'px',height:(canvas_height*0.8)+'px'}" class="canvas"></canvas>
				<u-button :custom-style="{width:'80%',marginTop:'20rpx'}" type="success" @click="save" shape="circle" v-if="image">保存图片</u-button>
				
				<u-button :custom-style="{width:'80%',marginTop:'20rpx'}" type="warning" open-type="share" shape="circle" v-if="image">分享好友</u-button>
		<!-- </u-mask> -->


	</view>
</template>

<script>
	import rCanvasJS from "./r-canvas.js"
	export default {
		mixins: [rCanvasJS],

		props: {
		
			image:{
				type:String,
		         default:""	
			}
		},
		data(){
			return{
				show:false
			}
		},
		
	
		methods:{
			close(){			
				this.show=false
				this.canvas_id=''
			},
			save(){
				console.log(this.image)
			 	uni.saveImageToPhotosAlbum({
			 		filePath:this.image,
						success:(res)=> {
							uni.showToast({
								title: '图片保存成功',
								icon: 'none',
							});
							
						},
						fail: function(e) {
							console.log(e);
							uni.showToast({
								title: '图片保存失败',
								icon: 'none',
							});
						}
			 	})
			}
		},
		
	}
</script>
<style>
	.r-canvas-component.hidden {
		position: fixed;
		top: -5000upx;
	}

	.canvas {
		position: relative;
		left: 10%;
		
	}
</style>
